<template>
  <el-menu
    :default-openeds="opens"
    active-text-color="#ffd04b"
    background-color="#303133"
    text-color="#fff"
    :collapse-transition="false"
    :router="true"
    :collapse="isCollapse"
    style="min-height: 100vh; overflow-x: hidden; font-size: 22px"
  >
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img
        src="../assets/logo.png"
        style="width: 20px; position: relative; top: 5px; margin-right: 5px"
      />
      <b style="color: white" v-show="logoTextShow">后台管理系统</b>
    </div>
    <div v-for="item in menus" :key="item.id">
      <div v-if="item.path">
        <el-menu-item :index="item.path"
          ><span default="titel"
            ><el-icon> <User /></el-icon>{{ item.name }}</span
          ></el-menu-item
        >
      </div>
      <div v-else>
        <el-sub-menu :index="item.id + ''">
          <template #title
            ><el-icon> <Menu /></el-icon
            ><span style="font-size: 20px">{{ item.name }}</span></template
          >
          <div v-for="subItem in item.children" :key="subItem.id">
            <el-menu-item :index="subItem.path" style="font-size: 17px"
              ><el-icon> <User /></el-icon>{{ subItem.name }}</el-menu-item
            >
          </div>
        </el-sub-menu>
      </div>
    </div>

    <!-- <el-menu-item index="/home" style="font-size: 20px"
      ><el-icon> <House /></el-icon>主页</el-menu-item
    > -->
    <!-- <el-sub-menu index="2">
      <template #title
        ><el-icon> <Menu /></el-icon
        ><span style="font-size: 20px">系统管理</span></template
      >
      <el-menu-item index="/user" style="font-size: 17px"
        ><el-icon> <User /></el-icon>用户管理</el-menu-item
      >
      <el-menu-item index="/role" style="font-size: 17px"
        ><el-icon> <User /></el-icon>角色管理</el-menu-item
      >
      <el-menu-item index="/menu" style="font-size: 17px"
        ><el-icon> <User /></el-icon>菜单管理</el-menu-item
      >
      <el-menu-item index="/file" style="font-size: 17px"
        ><el-icon> <document /></el-icon>文件管理</el-menu-item
      >
      <el-menu-item index="/ip" style="font-size: 17px"
        ><el-icon> <document /></el-icon>IP地址</el-menu-item
      >
    </el-sub-menu> -->
  </el-menu>
</template>
<script>
export default {
  name: "Aside",
  props: {
    isCollapse: Boolean,
    logoTextShow: Boolean,
    opens: [],
  },
  data() {
    return {
      menus: localStorage.getItem("menus")
        ? JSON.parse(localStorage.getItem("menus"))
        : [],
      opens: localStorage.getItem("menus")
        ? JSON.parse(localStorage.getItem("menus")).map((v) => v.id + "")
        : [],
    };
  },
  created() {},
};
</script>
<style scoped></style>
